<!DOCTYPE html>
<html>

<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
<title>画板实验</title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style type="text/css">
#myCanvas{background: red;}
</style>
</head>

<body>
<canvas id="myCanvas"></canvas>

<div>
	<button onClick="clean();">清 空</button>
	<button onClick="save();">生成图片</button>
</div>

<img id='img' alt='请涂鸦……' />
<!--<p id="textId">sdfsdfs</p>-->
<!--<textarea id="log" cols="30" rows="5"></textarea>-->
<script type="text/javascript">
	var canvas,board,img;
	 canvas = document.getElementById('myCanvas');
	 img= document.getElementById('img');
	
	 canvas.height = 300;
	 canvas.width = 300;
	
	 board = canvas.getContext('2d');
	
	 var mousePress = false;
	 var last = null;
	
	 function beginDraw(){
	 mousePress = true;
	}
	
	 function drawing(event){
	event.preventDefault();
	if(!mousePress)return;
	 var xy = pos(event);
	if(last!=null){
	board.beginPath();
	board.moveTo(last.x,last.y);
	board.lineTo(xy.x,xy.y);
	board.stroke();
	}
	 last = xy;
	
	}
	
	 function endDraw(event){
	 mousePress = false;
	 event.preventDefault();
	 last = null;
	}
	
	 function pos(event){
	 var x,y;
	if(isTouch(event)){
	 x = event.touches[0].pageX;
	 y = event.touches[0].pageY;
	}else{
	 x = event.offsetX+event.target.offsetLeft;
	 y = event.offsetY+event.target.offsetTop;
	}
	// log('x='+x+' y='+y);
	 return {x:x,y:y};
	}
	
	 function log(msg){
	 var log = document.getElementById('log');
	 var val = log.value;
	 log.value = msg+'n'+val; 
	}
	
	 function isTouch(event){
	 var type = event.type;
	if(type.indexOf('touch')>=0){
	 return true;
	}else{
	 return false;
	}
	}
	
	 function save(){
	//base64
	 var dataUrl = canvas.toDataURL();
	 //document.getElementById('textId').innerText(dataUrl);
//			 document.getElementById("textId").innerHTML = dataUrl; 
	// dataUrl = dataUrl.replace("image/png","image/octet-stream");
	 img.src = dataUrl;
	}
	
	
	 function clean(){
	board.clearRect(0,0,canvas.width,canvas.height);
	
	}
	
	 board.lineWidth = 1;
	board.strokeStyle="#0000ff";
	
	
	 canvas.onmousedown = beginDraw;
	 canvas.onmousemove = drawing;
	 canvas.onmouseup = endDraw;
	canvas.addEventListener('touchstart',beginDraw,false);
	canvas.addEventListener('touchmove',drawing,false);
	canvas.addEventListener('touchend',endDraw,false);
</script>

<!--[ lim_{x to 0} ]-->

</body>

</html>